<template>
  <div>
    <h1>{{ num }}</h1>
    <button @click="handleNum">修改普通数据</button>
    <h1>{{ num1 }}</h1>
    <button @click="handleNum1">修改响应式数据</button>
    <h1>{{ msg }}</h1>
    <h2>{{ reMsg }}</h2>
    <button @click="msg='走你'">修改msg</button>
  </div>
</template>

<script setup>
// 组合式API，必须在setup环境中才能使用
// 组合式API，一切皆函数

import { computed, onMounted, onUpdated, ref, watch } from 'vue';

// 1. 普通数据，数据的变化不能触发UI视图更新
let num = 100
const handleNum = ()=>{
  num++
  console.log(num);
}

// 2. 响应式数据，替代选项式中的data的作用
const num1 = ref(123)
const handleNum1 = ()=>{  //自定义函数替代methods作用
  num1.value+=10
}

// 3. computed方法，替代选项式中的computed计算属性
const msg = ref('Hello')
const reMsg = computed(()=>{
  return msg.value.split('').reverse().join('')
})

// 4. watch监听
watch(num1,()=>{
  console.log('检测到了num1的变化');
})

//5. beforeCreate,created系列的生命周期被剔除了
// 其他生命周期的名称发生了变化
console.log('setup环境初始化了');
onMounted(()=>{
  console.log('视图渲染完毕');
})
onUpdated(()=>{
  console.log('视图更新了');
})
</script>

<style lang="scss" scoped>

</style>